<template>
    <div class="detail">
        <h1>订单详情</h1>
        <div class="content">
         
            <div class="form">
                <ul>
                    <li>
                        <span>订单号：</span>
                        <div class="inp">{{ form.orderNo }}</div>
                    </li>
                    <li><span>创建时间：</span>
                        <div class="inp">{{ form.createTime }}</div>
                    </li>
                    <li><span>收件人：</span>
                        <div class="inp">{{ form.shippingVo.receiverName}},{{ form.shippingVo.receiverProvince }},{{ form.shippingVo.receiverCity }},{{ form.shippingVo.receiverAddress }}</div>
                    </li>
                    <li><span>订单状态：</span>
                        <div class="inp">{{ form.statusDesc }}</div>
                    </li>
                    <li><span>支付方式：</span>
                        <div class="inp">{{ form.paymentTypeDesc }}</div>
                    </li>
                    <li><span>订单金额：</span>
                        <div class="inp">￥{{ form.payment }}</div>
                    </li>
                </ul>
                <div class="table">
                    <table cellspacing="0" width="1000">
                        <thead>
                            <th>商品图片</th>
                            <th>商品信息</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>合计</th>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in form.orderItemVoList" :key="index">
                                <td><img :src="`${form.imageHost}${form.orderItemVoList[index].productImage}`" alt=""></td>
                                <td>{{ item.productName }}</td>
                                <td>￥{{ item.currentUnitPrice }}</td>
                                <td>{{ item.quantity }}</td>
                                <td>￥{{ item.totalPrice }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { orderDetail } from '@/utils/API'
export default {
    data() {
        return {
            NoId: '',
            form: {}
        }
    },
    methods: {
        getDetail() {
            orderDetail({ orderNo: this.NoId }).then(res => {
                console.log(res);
                this.form = res
                console.log(this.form);
            })
        }
    },
    mounted() {
        console.log(Number(this.$route.params.id));
        this.NoId = Number(this.$route.params.id)
        this.getDetail()
    }
}
</script>

<style lang="scss" scoped>
.detail {
    width: 100%;
    height: 100%;
    padding-top: 15px;
    padding-left: 20px;

    h1 {
        font-weight: normal;
        font-size: 40px;
    }

    .content {
        margin-top: 10px;

        .form {
            width: 500px;

            ul {
                li {
                    list-style: none;
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    width: 400px;
                    justify-content: space-between;

                    

                    .inp {
                        margin-left: 10px;
                        background: #fff;
                        width: 300px;
                        height: 40px;
                        line-height: 40px;
                        padding-left: 10px;
                    }
                }
            }

            .table {
                table {
                    margin-top: 10px;
                    img{
                        width: 80px;
                        height: 80px;
                        margin-left: 20px;
                    }
                    th {
                        width: 100px;
                        height: 60px;
                        background: #f3f3f3;
                        border: 1px solid #e2e2e2;
                        text-align: left;
                        padding-left: 10px;
                    }

                    td {
                        height:150px;
                        background: #f9f9f9;
                        padding-left: 10px;
                        border: 1px solid #e1e1e1;
                        
                    }
                }
            }
        }
    }
}
</style>
